<div
  v-kb-modal="isShow"
  class="modal fade test"
  data-backdrop="static"
  data-keyboard="false"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button @click="reset" class="close"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title">{{ Kooboo.text.site.view.dataSource }}</h4>
      </div>
      <div class="modal-body">
        <div class="panel panel-default" style="margin-top:15px;">
          <div class="panel-body" style="position: relative">
            <div id="action_tree"></div>
          </div>
        </div>
        <table class="table" v-if="parameterMappings.length">
          <thead>
            <tr>
              <th>{{ Kooboo.text.component.actionDialog.parameter }}</th>
              <th>{{ Kooboo.text.component.actionDialog.mapTo }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="($data, $index) in parameterMappings" :key="$index">
              <td>
                {<span class="form-control-static"
                  >{{ $data.fromParameter}}</span
                >}
              </td>
              <td>
                <select class="form-control" v-model="toParameter">
                  <option value="">Default</option>
                  <option
                    v-for="(item,index) in fields"
                    :key="index"
                    :value="item.value"
                    >{{ item.name }}</option
                  >
                </select>
              </td>
            </tr>
          </tbody>
        </table>
        <kb-form
          class="form-horizontal"
          ref="form"
          :rules="rules"
          :model="model"
        >
          <kb-form-item prop="name">
            <label class="control-label col-md-2"
              >{{ Kooboo.text.component.actionDialog.aliasName }}</label
            >
            <div class="col-md-10">
              <input
                type="text"
                class="form-control"
                v-model="model.name"
                :disabled="isEdit"
              />
            </div>
          </kb-form-item>
        </kb-form>
      </div>
      <div class="modal-footer">
        <p class="pull-left">
          <i class="fa fa-file icon-state-warning"></i>
          <span class="margin-right-15"
            >{{ Kooboo.text.component.actionDialog.global }}</span
          >
          <i class="fa fa-file icon-state-info"></i>
          <span>{{ Kooboo.text.component.actionDialog.local }}</span>
        </p>
        <template v-if="methodId">
          <template v-if="isGlobal || isPublic">
            <button class="btn green" v-if="!isEdit" @click="next"
              >{{ Kooboo.text.common.next }}</button
            >
            <button class="btn green" v-else @click="edit"
              >{{ Kooboo.text.common.edit }}</button
            >
          </template>
          <button v-else class="btn green" @click="edit"
            >{{ Kooboo.text.common.edit }}</button
          >
        </template>
        <button class="btn gray" @click="reset" aria-hidden="true"
          >{{ Kooboo.text.common.cancel }}</button
        >
      </div>
    </div>
  </div>
</div>
